/**
 * Created by 001 on 2017/11/7.
 */
//进度条插件
import React from 'react'
import './progress.less'

let MusicProgress = React.createClass({
    getDefaultProps(){
        return {
            barColor:"#2f9842"
        }
    },
    changeProgress(e){
        let progressBar = this.refs.progressBar;
        let progress = (e.clientX - progressBar.getBoundingClientRect().left)/progressBar.clientWidth;
        console.log("进度条百分比:"+progress);
        //先判断事件存在否
        this.props.onProgressChange&&this.props.onProgressChange(progress)
    },
   render(){
       return (
           <div className="components-progess" ref="progressBar" onClick={this.changeProgress}>
               <div className="progress"
                    style={{width:`${this.props.progress}%`,background:this.props.barColor}}
                    ></div>
           </div>
       )
   }
});

export default MusicProgress;